<template>
<div>
  <div class="header">
    <span class="text1">功能分析和故障诊断</span>
    <el-button type="text" class="header-text2" @click="goOff()">返回</el-button>
  </div>
    <div class="box">
    <div class="box1">
      <div class="discern1">
        <img class="d1" src="../assets/img/discern1.png" alt="" >
        <p class="text2">上传图片功能</p>
        <p class="text3">通过上传图片和输入相关信息，分析并输出图片的信息。</p>
      </div>
        <div class="manage1">
           <div style="font-size: 15px;color:#515a6e;padding-top: 10px;">
             请上传一张225*225像素的图像，图像格式应为png或jpg。上传后，图像的详细信息将显示在以下的表格中。
            </div>
          <div class="card-body text-center">
            <img :src="previewImageUrl" class="rounded img-thumbnail mb-3 preview-image" style="height: 200px;width: 200px">
            <el-form class="form-group" :model="form" style="margin-left: 40px">
              <el-form-item label="选择示功图图片:" class="choose">
                <input type="file" ref="fileInput" accept="image/*" @change="uploadImage">
              </el-form-item>
            </el-form>
            <el-button type="primary" class="mt-3" id="identifyBtn" @click="submitImage" style="margin-left: 40px">立即上传</el-button>
          </div>
          <el-table :data="lists" stripe style="width: 100%">
            <el-table-column prop="result" label="结果" />
            <el-table-column label="图片" width="250" prop="image">
              <template #default="scope">
                <el-image
                    style="width: 100px; height: 100px"
                    :src=" 'data:image/png,image/jpg;base64,'+ scope.row.image"
                    fit="cover"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
    </div>
    <div class="box1">
      <div class="discern1">
        <img class="d1" src="../assets/img/discern2.png" alt="" >
        <p class="text2">输入文件功能</p>
        <p class="text3">通过输入文件，分析并整理输出文件的分析信息。</p>
      </div>
        <div class="manage2">
          <div style="font-size: 15px;color:#515a6e;padding-top: 10px;">
            请将文件拖拽至白色方框内或点击立刻上传按钮上传文件，文件必须为xlsx,xlx或csv格式，具体检测结果请前往机械管理平台查看
          </div>
          <div class="document">
            <el-upload drag
                       name="file"
                       :limit=limitNum
                       :auto-upload="false"
                       accept=".xlsx,.xlx,.csv"
                       :action="UploadUrl()"
                       :before-upload="beforeUploadFile"
                       :on-change="fileChange"
                       :on-exceed="exceedFile"
                       :on-success="handleSuccess"
                       :on-error="handleError"
                       :file-list="fileList">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">文件不超过10M</div>
            </el-upload>
            <br/>
            <el-button  type="primary" @click="uploadFile" style="margin-left: 250px" >立即上传</el-button>
            <el-button style="width: 100px">取消</el-button>
          </div>
          <p class="check">检测结果请前往机械管理平台查看</p>
        </div>
    </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';

// 定义响应式变量
const form = ref({ image: null });
const lists = ref([]);
const previewImageUrl = ref('https://via.placeholder.com/225');
const resultData = ref([]);
const limitNum = 1;  // 上传excel时，同时允许上传的最大数
const fileList = ref([]);   // excel文件列表
const router = useRouter();

const goOff = () => {
  router.go(-1);
};

const uploadImage = (event) => {
  const imageFile = event.target.files[0];
  previewImageUrl.value = URL.createObjectURL(imageFile);
};

const getlist = async () => {
  try {
    const response = await axios.get('/user/getImageMessage');
    lists.value = response.data;
    console.log(response.data);
  } catch (error) {
    console.error('Error:', error);
  }
};

const submitImage = async () => {
  if (form.value.image) {
    const formData = new FormData();
    formData.append('file', form.value.image);
    try {
      const response = await axios.post('/user/identify', formData);
      await getlist();
      resultData.value.push({
        result: response.data.result,
        time: new Date(),
      });
      console.log(response.data.result);
    } catch (error) {
      console.error(error);
    }
  }
};

const beforeUploadFile = (file) => {
  console.log('before upload');
  const extension = file.name.split('.').pop();
  const size = file.size / 1024 / 1024;
  if (!['xlsx', 'xlx', 'csv'].includes(extension)) {
    alert('只能上传后缀是.xlsx, .xlx, .csv的文件');
    return false;
  }
  if (size > 10) {
    alert('文件大小不得超过10M');
    return false;
  }
  return true;
};

const uploadFile = async () => {
  if (fileList.value.length > 0) {
    const formData = new FormData();
    formData.append('file', fileList.value[0]);
    try {
      const response = await axios.post('/user/identify', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      });
      alert('文件上传成功');
      console.log(response.data);
      // 处理上传成功的逻辑
    } catch (error) {
      alert('文件上传失败');
      console.error(error);
      // 处理上传失败的逻辑
    }
  }
};
</script>


<style scoped>
.text1{
  margin-left:160px;
  position: absolute;
  top:20px;
}
.header-text2{
  margin-left: 63em;
  padding-top: 1.6em;
  font-size: 20px;
  color: #515a6e;
}
.header{
  height: 70px;
  background-color:rgba(151, 171, 215, 0.12) ;
  margin-bottom: 20px;

}
.box{
  display: -webkit-flex;
  display: flex;
  margin-left: 10px;
}

.box1 {
  background-color:white;
  width: 730px;
  height:700px;
  margin-right: 20px;
}
.d1{
  width: 70px;
  height: 70px;
}
.discern1{
  padding-top:10px;
  padding-left: 20px;
  height: 145px;
  background-color: #007BFF;
  border-radius: 10px 10px 0 0;
}
.text2{
  font-weight: bold;
  color: white;
  font-size: 20px;
  padding-top: 6px;
}
.text3{
  color:white;
  font-size: 15px;
  padding-top: 6px;
}
.manage1{
  background-color:rgba(151, 171, 215, 0.12);
  height: 500px;
  width: 730px;
  border-radius: 0 0 10px 10px;
}
.manage2{
  background-color:rgba(151, 171, 215, 0.12);
  height: 500px;
  width: 730px;
  border-radius: 0 0 10px 10px;
}
.rounded {
  margin-top: 20px;
}
.mt-4{
  margin-left: 160px;
  margin-right: 150px;
}
.mt-3{
  position: relative;
  top:-100px;
  left:170px;
  width: 100px;

}
.choose {
  position: relative;
  top: -100px;
  left: 170px;
}
.check{
 text-align: center ;
  margin-top:30px;
  color:#515a6e;
  font-size:20px;
}
.document {
  padding: 60px 10px 0 10px;

}

</style>
